<template>
  <div class="coat">
    <el-container>
      <el-header class="theHeader" height="80px">
        <div class="buttonBox">
          <div @click="forwardTo('/unit')"> <img src="@/assets/images/unitStatOrange.png" alt=""></div>
          <div @click="forwardTo('/cars')"><img src="@/assets/images/carsStatBlue.png" alt=""></div>
          <div @click="forwardTo('/company')"><img src="@/assets/images/companyStatBlue.png" alt=""></div>
        </div>
        <div class="buttonBox">
          <div @click="forwardTo('/dispatch')"><img src="@/assets/images/dispatchStatBlue.png" alt=""></div>
          <div @click="forwardTo('/expense')"><img src="@/assets/images/expenseStatBlue.png" alt=""></div>
        </div>
      </el-header>
      <el-container class="upperContainer">
        <el-main style="overflow: hidden;">
          <div class="theBlock">
            <TheTitle theSize="small" theType="thin">
              <template #first>
                <span class="theFirst">单位性质统计</span>
              </template>
              <template #last>
                <span class="theLast">按照单位性质统计单位数量</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to right, rgba(0,132,243,0.1), rgba(0,132,243,0));">
              <PieBar :data=pieBarData>
                <template #theSlot>
                  <span class="theSlot">单位总计</span>
                </template>
              </PieBar>
            </div>
          </div>
          <CuttingLine theSize="small" />
          <div class="theBlock" style="margin-top: 20px;">
            <TheTitle theSize="small" theType="thin">
              <template #first>
                <span class="theFirst">单位级别类型统计</span>
              </template>
              <template #last>
                <span class="theLast">按照单位级别统计单位数量</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to right, rgba(0,132,243,0.1), rgba(0,132,243,0));">
              <TheBar :data=barLData />
            </div>
          </div>
          <CuttingLine theSize="small" />
        </el-main>
        <el-main class="middleMain" style="gap: 0!important;">
          <div id="theUnitMap" style="height: 750px; width: 740px;"></div>
          <div class="shiZhiGuan"></div>
        </el-main>
        <el-main class="rightMain">
          <div class="theBlock">
            <TheTitle theSize="small" theType="thicken">
              <template #first>
                <span class="theFirst">区域单位统计</span>
              </template>
              <template #last>
                <span class="theLast">按照地区对单位数量进行统计</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to right, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <RankList :data="dataRank" theType="orange" />
            </div>
          </div>
          <CuttingLine theSize="small" />
          <div class="theBlock" style="margin-top: 20px;">
            <TheTitle theSize="small" theType="thicken">
              <template #first>
                <span class="theFirst">单位组织类型统计</span>
              </template>
              <template #last>
                <span class="theLast">按照单位组织类型统计单位数量</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to right, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <TheBar :data=barRData />
            </div>
          </div>
          <CuttingLine theSize="small" />
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>
<script setup>
import { reactive, computed, onMounted } from 'vue';

import TheTitle from '@/components/TheTitle.vue';
import CuttingLine from '@/components/CuttingLine.vue';
import PieBar from '@/components/PieBar.vue'
import TheBar from '@/components/TheBar.vue';
import RankList from '@/components/RankList.vue'

import { forwardTo } from '@/hook/forwardTo';


const party = 4907
const stateOwn = 3135
const enterprise = 2317
const others = 2045
const pieBarData = reactive({
  dataX: [party, stateOwn, enterprise, others],
  dataY: ['党政机关', '国有企业', '事业单位', '其他',],
  sum: computed(() => {
    return party + stateOwn + enterprise + others
  }).value,
  theColorList: ['#1C60FE', '#6e91e3', '#1c60fe', '#35e0ff'],
  pieId: 'companyTypePie',
  barId: 'companyTypeBar',
})

const barLData = {
  dataX: ['正厅级', '副厅级', '正处级', '副处级', '正科级', '副科级', '副省级', '股级及以下', '其他'],
  dataY: [490, 710, 190, 480, 920, 820, 620, 330, 530],
  sum: 5090,
  id: 'lBar'
}

const dataRank = {
  label: ['编号', '区县', '占比', '单位数量',],
  data: [
    { name: '市辖区', id: 130101000000, percent: '18', amount: '1800' },
    { name: '长安区', id: 130102000000, percent: '18', amount: '1800' },
    { name: '桥西区', id: 130104000000, percent: '18', amount: '1800' },
    { name: '新华区', id: 130105000000, percent: '18', amount: '1800' },
    { name: '井陉矿区', id: 130107000000, percent: '18', amount: '1800' },
    { name: '裕华区', id: 130108000000, percent: '18', amount: '1800' },
    { name: '藁城区', id: 130109000000, percent: '18', amount: '1800' },
    { name: '鹿泉区', id: 130110000000, percent: '18', amount: '1800' },
    { name: '栾城区', id: 130111000000, percent: '18', amount: '1800' },
    { name: '井陉县', id: 130121000000, percent: '18', amount: '1800' },
    { name: '正定县', id: 130123000000, percent: '18', amount: '1800' },
    { name: '行唐县', id: 130125000000, percent: '18', amount: '1800' },
    { name: '灵寿县', id: 130126000000, percent: '18', amount: '1800' },
    { name: '高邑县', id: 130127000000, percent: '18', amount: '1800' },
    { name: '深泽县', id: 130128000000, percent: '18', amount: '1800' },
    { name: '赞皇县', id: 130129000000, percent: '18', amount: '1800' },
    { name: '无极县', id: 130130000000, percent: '18', amount: '1800' },
    { name: '平山县', id: 130131000000, percent: '18', amount: '1800' },
    { name: '元氏县', id: 130132000000, percent: '18', amount: '1800' },
    { name: '赵县', id: 130133000000, percent: '18', amount: '1800' },
    { name: '高新区', id: 130171000000, percent: '18', amount: '1800' },
    { name: '化工园区', id: 130172000000, percent: '18', amount: '1800' },
    { name: '辛集市', id: 130181000000, percent: '18', amount: '1800' },
    { name: '晋州市', id: 130183000000, percent: '18', amount: '1800' },
    { name: '新乐市', id: 130184000000, percent: '18', amount: '1800' },
  ],
}


const barRData = {
  dataX: ['车改办', '党政机关', '事业单位', '国有企业', '服务平台', '执勤执法', '执法平台',],
  dataY: [490, 510, 180, 490, 960, 810, 610],
  sum: 4050,
  id: 'rBar'
}

const emit = defineEmits(['theScrollBarExist'])
onMounted(() => {
  const hasScrollbar = computed(() => {
    return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight)
  });
  emit('theScrollBarExist', hasScrollbar.value)
})
</script>
<style scoped>
.shiZhiGuan {
  width: 234px;
  height: 63px;
  background-image: url('@/assets/images/unitShiZhiGuan.png');

  position: relative;
  top: -10px;
}

.unitMiddleMain {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#theUnitMap {
  background-image: url('@/assets/images/theMap.png');
  background-position: center center;
  background-repeat: no-repeat;
}
</style>